<template>
	<view class="favorites">
		<view class="nav-bar">
			<view class="nav-content">
				<text class="nav-title">收藏</text>
				<view class="nav-actions">
					<view class="icon-wrapper">
						<uni-icons type="search" size="22" color="#666666" />
					</view>
					<view class="icon-wrapper">
						<uni-icons type="list" size="22" color="#666666" />
					</view>
				</view>
			</view>
		</view>

		<scroll-view class="container" scroll-y>
			<view class="content-grid">
				<view v-for="(item, index) in collections" :key="index" class="grid-item"  @click="goToDetailPage(item.artworkId)">
					<view class="card">
						<ImgVue :src="item.imgUrl"  class="card-image" />
						<view class="card-content">
							<text class="card-title">{{item.title}}</text>
							<text class="card-date">收藏于 {{formatDate(item.createTime)}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script lang="ts" setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getCategoryList } from '../../../api/category';
import { getFavoriteList } from '../../../api';
import ImgVue from '../../../components/Img/Img.vue';

	// 导航栏数据
	const navItems = ref([]);
	const currentNav = ref(null); // 默认选中的导航项

	const collections = ref([]);

	// 获取分类数据
	const fetchCategories = async () => {
		try {
			const response = await getCategoryList(); // 获取分类数据
			console.log(response)
			if (response.data) {
				// 在分类数据的开头插入“全部”
				navItems.value = [{
					id: null,
					name: '全部'
				}, // 设置 id 为 null
				...response.data, // 追加其余分类数据
				];
			} else {
				navItems.value = [{
					id: null,
					name: '全部'
				}]; // 如果没有分类数据，也添加“全部”
			}
		} catch (error) {
			console.error('获取分类数据失败:', error);
			// 如果分类数据获取失败，也确保至少有“全部”
			navItems.value = [{
				id: null,
				name: '全部'
			}];
		}
	};

	const fetchFavorite = async() => {
		const response = await getFavoriteList();
		collections.value = response.data
	}

	const formatDate = (dateString: string) => {
	  const date = new Date(dateString);
	  const year = date.getFullYear();
	  const month = String(date.getMonth() + 1).padStart(2, '0');
	  const day = String(date.getDate()).padStart(2, '0');
	  return `${year}年${month}月${day}日`;
	};


	// 页面跳转
	const goToDetailPage = (id) => {
		uni.navigateTo({
			url: `/pages/photoDetail/photoDetail?id=${id}`
		});
	}
	
	// 页面加载时，初始化数据
	onLoad(() => {
		fetchCategories();
		fetchFavorite();
	});

	// 选择分类
	const selectCategory = (id : any) => {
		currentNav.value = id;
	};
</script>


<style scoped>
	page {
		height: 100%;
	}

	.favorites {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f8f8f8;
	}

	.nav-bar {
		flex-shrink: 0;
		height: 88rpx;
		background-color: #ffffff;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.nav-content {
		height: 88rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.nav-actions {
		display: flex;
		align-items: center;
	}

	.icon-wrapper {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.container {
		flex: 1;
		overflow: auto;
	}

	.category-scroll {
		flex-shrink: 0;
		height: 120rpx;
		background-color: #ffffff;
	}

	.category-list {
		display: flex;
		align-items: center;
		padding: 24rpx 32rpx;
		white-space: nowrap;
	}

	.category-item {
		display: inline-block;
		padding: 16rpx 32rpx;
		margin-right: 24rpx;
		border-radius: 32rpx;
		font-size: 14px;
		color: #666666;
		background-color: #f5f5f5;
	}

	.category-item-active {
		color: #ffffff;
		background-color: #6366F1;
	}

	.content-grid {
		padding: 32rpx;
		column-count: 2;
		column-gap: 24rpx;
	}

	.grid-item {
		break-inside: avoid;
		margin-bottom: 24rpx;
	}

	.card {
		background-color: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.card-image {
		width: 100%;
		height: 320rpx;
	}

	.card-content {
		padding: 24rpx;
	}

	.card-title {
		font-size: 14px;
		color: #333333;
		font-weight: 500;
	}

	.card-date {
		display: block;
		margin-top: 8rpx;
		font-size: 12px;
		color: #999999;
	}

	.tab-bar {
		flex-shrink: 0;
		height: 100rpx;
		background-color: #ffffff;
		border-top: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tab-text {
		margin-top: 8rpx;
		font-size: 12px;
		color: #999999;
	}

	.tab-text-active {
		color: #6366F1;
	}
</style>